const componentChild = {
    template: "#cTemplate",
    data() {
        return {
            counter: 0
        }
    },
    props: {
        componentName:{
            type: String,
            // required: true,
            default: "childComponent"
        }
    },
    methods: {
        increase(){
            this.counter++;
            this.$emit('increase', function inc(params) {
                params++;
                return params;
            })
        },
        decrease() {
            this.counter--;
            this.$emit('decrease', function dec(params) {
                params--;
                return params;
            })
        }
    },
}

const componentFather = {
    template: "#fTemplate",
    data(){
        return {
            totalCounter: 0
        }
    },
    components: {
        componentChild
    },
    methods: {
        changeTotal(change){
            this.totalCounter = change(this.totalCounter);
        }
    },
}

const vm = new Vue({
    el: "#app",
    data:{

    },
    components:{
        componentFather,
    }
})